<template>
	<view class="container">
		<view class="status-bar">
			<!-- 非h5端状态栏占位 -->
		</view>

		<view class="head">
			<uni-icons type="back" size="25" color="#595B5A" @click="back"></uni-icons>
			<uni-easyinput prefixIcon="search" focus="true" :value="content.value" @input="add" class="input" />
			<text>搜索</text>
		</view>

		<view class="find">
			<text>搜索发现</text>
			<view class="list">
				<view class="tag" v-for="item,index in tagList" :key="index" @click="select(index)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import {
		onShow
	} from "@dcloudio/uni-app"

	const content = ref('')

	const tagList = ref([])
	
	function back(){
		uni.navigateBack();
	}

	function select(index) {
		content.value = tagList.value[index].name
	}

	function add(e) {
		content.value = e
	}

	function getTagList() {
		uni.request({
			url: 'http://localhost:8080/tag',
			method: 'GET',
			success: res => {
				tagList.value = res.data.data
			},
			fail: () => {
				uni.showToast({
					title: "网络异常"
				})
			},
			complete: () => {}
		});
	}

	onShow(() => {
		getTagList()
	})
</script>

<style scoped>
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.head {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.input {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

	.head text {
		color: #019DD1;
	}

	.find {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.tag {
		display: inline-block;
		padding: 10rpx 20rpx;
		margin: 10rpx;
		border-radius: 999rpx;
		background-color: #e1e1e1;
		color: #333;
		font-size: 28rpx;
		border: 2rpx solid #d1d1d1;
	}
</style>